<template>
	<view class="records-page">
		<view class="record-title">
			<text>视导内容</text>
		</view>
		<view>
			<u-collapse accordion>
				<u-collapse-item v-for="target in targetData" :title="target.name">
					<u-tag slot="value" class="u-page__item__title__slot-title"
						:text="getFinishNum(target.children || []) +'/' + (target.children.length || 0)"
						borderColor="#F1F1F1" plain size="mini"
						:type="getFinishNum(target.children || []) < (target.children.length || 0)? 'primary': 'success'"></u-tag>
					<view v-for="item in target.children" class="record-list" @click="viewContent(item)">
						<text class="u-collapse-content">{{item.name}}</text>
						<u-tag :text="item.finishState === 0 ? '未完成' :'已完成'"
							:type="item.finishState === 0 ? 'success': 'error'" shape="circle" borderColor="#F1F1F1"
							size="mini"></u-tag>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
	</view>
</template>

<script>
	import {
		getTargetsBySchoolIdAndActivityIDExcludeThirdLevel,
		submitComment
	} from "@/api/supervise/index.js"
	import {
		deepClone,
		handleTree
	} from "@/utils/common.js"
	export default {
		data() {
			return {
				queryData: {},
				targetData: []
			}
		},
		methods: {
			viewContent(item) {
				const queryData = {
					...deepClone(item),
					activityId: this.queryData.activityId,
					schoolId: this.queryData.schoolId

				}
				this.$tab.navigateTo("/pages/index/supervise/supervise-save?queryData=" + encodeURIComponent(JSON
					.stringify(queryData)));
			},
			getFinishNum(data) {
				let num = 0;
				data.forEach(item => {
					if (item.finishState === 1) {
						num++;
					}
				});
				return num;
			},
			getTargetsBySchoolIdAndActivityIDExcludeThirdLevel() {
				let activityId = this.queryData.activityId;
				let schoolId = this.queryData.schoolId;
				let createTime = this.queryData.createTime;
				getTargetsBySchoolIdAndActivityIDExcludeThirdLevel(activityId, schoolId, createTime).then(
					res => {
						if (res.status == 0) {
							this.targetData = handleTree(res.targets, 1);
						}

					})
			},
			changeNaBtnTitle() {
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				const tn = currentWebview.getStyle().titleNView;
				const commentId = this.queryData.commentId
				if (!commentId) {
					tn.buttons[0].width = 0;
					currentWebview.setStyle({
						titleNView: tn
					});
				} else {
					tn.buttons[0].text = "提交";
					currentWebview.setStyle({
						titleNView: tn
					});
				}
			},
			submitComment() {
				let activityId = this.queryData.activityId;
				let schoolId = this.queryData.schoolId;
				let commentId = this.queryData.commentId;
				submitComment(activityId, schoolId, commentId).then(res => {
					if (res.status === 0) {
						uni.redirectTo({
							url: "/pages/work/viewDetail/viewSchool"
						});
					} else {
						uni.$u.toast("提交失败");
					}
				})
			}
		},
		onLoad(option) {
			if (Object.keys(option).length > 0) {
				const data = JSON.parse(decodeURIComponent(option.queryData));
				this.queryData = data;
				uni.setNavigationBarTitle({
					title: data.schoolName
				})
				this.getTargetsBySchoolIdAndActivityIDExcludeThirdLevel();
				this.changeNaBtnTitle();
			}

		},
		onNavigationBarButtonTap(e) {
			// 点击导航栏自定义按钮
			this.submitComment();
		}
	}
</script>

<style lang="scss" scoped>
	.records-page {
		width: 100vw;

		.record-title {
			text-align: center;
			height: 6vh;
			line-height: 6vh;
		}

		.record-list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 5vh;
			// line-height: 6vh;
		}
	}
</style>